<template>
  <view class="front_list">
    <view v-for="(item, index) in list" :key="index">
      <view class="front_item" v-if="item.frontUrl == ''" @tap="onTabClick(item)">
        <view class="front_img">
          <view class="front_jv" v-if="item.distance">{{longitudeLatitude[index]  }}</view>
          <image
            class="_img"
            :src="item.frontPic == '' ? '/static/img/null.png' : $api.getImgUrl(item.frontPic)"
            mode="aspectFill"
          ></image>
        </view>
        <view class="front_text">
          <view class="front_title">{{ item.frontName }}</view>
          <view class="front_con"
            ><text class="front_count">容纳人数</text>{{ item.frontCapacity }} 人
          </view>
          <view class="front_con"
            ><text class="front_count">阵地位置</text>{{ item.frontAddress }}</view
          >
        </view>
      </view>
      <view class="front_item" v-if="item.frontUrl != ''" @tap="onTabClick(item)">
        <view class="front_img">
          <view class="front_jv" v-if="item.distance">{{ longitudeLatitude[index]  }}</view>
          <image
            class="_img"
            :src="item.frontPic == '' ? '/static/img/null.png' : $api.getImgUrl(item.frontPic)"
            mode="aspectFill"
          ></image>
        </view>
        <view class="front_text">
          <view class="front_title">{{ item.frontName }}</view>
          <view class="front_con"
            ><text class="front_count">容纳人数</text>{{ item.frontCapacity }} 人
          </view>
          <view class="front_con"
            ><text class="front_count">阵地位置</text
            >{{ item.frontAddress || '暂无阵地信息' }}</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getLongitudeLatitude } from '@/common/type'
  export default {
    name: 'FrontList',
    props: {
      list: {
        type: Array,
        default() {
          return []
        },
      },
    },
    data(){
      return {
        lat: 29.59, //默认北京定位 经度
        lng: 119.05, //维度
      }
    },
    computed:{
      //获取距离定位
      //距离我这边多少路
      longitudeLatitude() {
        return this.list.map((item) => {
          const { frontDimension: latitude, frontLongitude: longitude } = item
          if (
              (latitude === '0.0' && longitude === '0.0') ||
              (latitude === 0.0 && longitude === 0.0)
          ) {
            return ''
          }
          const len = getLatitudeLongitude(this.lat, this.lng, latitude, longitude)
          return len || 0
        })
      },
    },
    mounted(){
      uni.getLocation({
        type: 'gcj02',
        altitude: true,
        success: (res) => {
          const { longitude, latitude } = res
          this.lat = latitude
          this.lng = longitude
        },
        fail: (res) => {
          console.log('地址信息获取失败请打开GPRS权限',res)
        },
      })
    },
    computed:{
      //获取距离定位
      //距离我这边多少路
      longitudeLatitude() {
        return  getLongitudeLatitude(this.list)
      },
    },
    methods: {
      onTabClick(item) {
        this.$emit('click', item)
      },
    },
  }
</script>

<style scoped lang="scss">
  .front_list {
    padding: 0 30rpx;
    .front_item {
      box-shadow: 0 0 5px #cccccc;
      display: flex;
      flex-direction: row;
      border-radius: 20rpx;
      margin: 30rpx 0;
      .front_img {
        width: 250rpx;
        height: 200rpx;
        padding: 20rpx;
        ._img {
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
        }
      }
      .front_text {
        width: calc(100% - 250rpx);
        padding: 20rpx 0 20rpx 0;
        border-radius: 0 20rpx 20rpx 0;
        .front_title {
          font-weight: bold;
          font-size: 28rpx;
          color: #333333;
          padding: 0 10rpx 10rpx 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .front_con {
          font-size: 24rpx;
          color: #888888;
          padding: 7rpx 10rpx 7rpx 0;
          line-height: 36rpx;
          .front_count {
            background-color: #76a8fe;
            color: #ffffff;
            padding: 0 20rpx;
            border-radius: 24rpx;
            margin-right: 10rpx;
          }
        }
      }
    }
    .front_jv {
      position: absolute;
      z-index: 10;
      font-size: 18rpx;
      padding: 5rpx 10rpx;
      background-color: #cf2d28;
      color: #ffffff;
      border-radius: 10rpx 0 10rpx 0;
      opacity: 0.8;
    }
  }
</style>
